<template>
    <div class="seller-container">
        <div class="seller-body">
            <h1 class="seller-name">{{seller.name}} </h1>
            <div class="rating-wrapper">
                <RatingBar class="seller-rating" :score='seller.score' :size="36" ></RatingBar>
                <span class="rating-count">({{seller.ratingCount}})</span>
                <span class="sell-count">月售{{seller.sellCount}}单</span>
            </div>
            <span class="favorite-wrapper">
                <span class="favorite-icon"></span>
                <span class="favorite-text"></span>
            </span>
            <span class="divider"></span>
            <div class="info-wrapper">
                <div class="text-wrapper">
                    <span class="title">起送价</span>
                     <span class="info-text">{{seller.minPrice}}<span class="desc">元</span></span>
                </div>
                <div class="text-wrapper">
                    <span class="title">商家配送</span>
                    <span class="info-text">{{seller.deliveryPrice}}<span class="desc">元</span></span>
                </div>
                <div class="text-wrapper">
                    <span class="title">平均配送时间</span>
                    <span class="info-text" >{{seller.deliveryTime}}<span class="desc">分钟</span></span>
                </div>
            </div>
        </div>
        <div class="bulletin-wrapper">
            <h1 class="bulletin-title">公告与活动</h1>
            <span class="bulletin-content">{{seller.bulletin}}</span>
            <div class="support" v-if="seller.supports" v-for="item in seller.supports">
                <div class="support-item">
                    <span v-if="supportIconClass" class="support-icon" :class="supportIconClass[item.type]"  ></span>
                    <span  class="support-text">{{item.description}}</span>
                </div>
            </div>
        </div>
        <div class="image-wrapper">
            <span class="image-text">商家实景</span>
            <div class="image-body">
                <img v-if="seller.pics" v-for="item in seller.pics" class="image" height="90" width="120" :src="item"/>
            </div>
        </div>
        <div class="extra-wrapper">
            <span class="extra-title">商家信息</span>
            <span class="extra-item" v-if="seller.infos" v-for="item in seller.infos">{{item}}</span>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import RatingBar from './RatingBar/RatingBar'
export default {
  name: 'Seller',
  props: {
    seller: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      supportIconClass: ['decrease', 'discount', 'guarantee', 'invoice', 'special']
    }
  },
  created: {

  },
  components: {
    RatingBar
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.seller-container
  background :rgb(243,245,247)
  .seller-body
    padding:18px
    background :white
    border-bottom :1px rgba(7,17,27,0.2) solid
    .seller-name
      font-size :14px
      color:rgb(7,17,27)
      line-height :14px
    .rating-wrapper
      font-size :10px
      color:rgb(77,85,93)
      line-height :18px
      margin-top :8px
      .seller-rating
        display :inline-block
        margin-left :0 12px 0 8px
      .rating-count
        display :inline-block
      .sell-count
        display :inline-block
    .favorite-wrapper
      position :absolute
      right :18px
      top :8px
      .favorite-icon
        font-size :24px
        color :rgb(240,20,20)
        line-height :24px
      .favorite-text
        font-size :10px
        color:rgb(77,85,48)
        line-height :10px
    .divider
      display :block
      background :rgba(7,17,27,0.1)
      height :1px
      width :100%
      margin-top :18px
    .info-wrapper
      display :flex
      padding:18px 0 18px 0
      font-size :10px
      color:rgb(147,153,159)
      text-align :center
      .text-wrapper
        display :block
        flex :1
      .info-text
        display :block
        flex :1
        font-size :24px
        color:rgb(7,17,27)
        font-weight :200
        line-height :24px
        margin-top :4px
        .desc
          display :inline-block
          font-size :10px
          color:rgb(147,153,159)
      &:nth-child(0)
        background :rgb(255,0,0)
  .bulletin-wrapper
    margin-top :16px
    background :white
    padding :18px
    border-bottom :1px rgba(7,17,27,0.2) solid
    border-top :1px rgba(7,17,27,0.2) solid
    .bulletin-title
      font-size :14px
      color:rgb(7,17,27)
      line-height :14px
    .bulletin-content
      margin :8px 12px 16px 12px
      font-size :12px
      font-weight :200
      color:rgb(240,20,20)
      line-height :24px
    .support
      font-size :12px
      font-weight :200
      color:rgb(7,17,27)
      line-height :64px
      .support-item
        border-top :1px rgba(7,17,27,0.1) solid
  .image-wrapper
    margin-top :16px
    background :white
    padding :18px 0 18px 18px
    border-bottom :1px rgba(7,17,27,0.2) solid
    border-top :1px rgba(7,17,27,0.2) solid
    .image-title
      font-size :14px
      color:rgb(7,17,27)
      line-height :14px
      font-weight :200
      padding-bottom :12px
    .image-body
      height :90px
      overflow :hidden
      .image
        display :inline-block
        margin-right :6px

  .extra-wrapper
    margin-top :16px
    background :white
    padding: 18px 12px 0 12px
    border-top :1px rgba(7,17,27,0.2) solid
    .extra-title
      font-size :14px
      color:rgb(7,17,27)
      line-height :38px
      font-weight :200
    .extra-item
      display :block
      font-size :12px
      color :rgb(7,17,27)
      line-height :48px
      font-weight :200
      border-top :1px rgba(7,17,27,0.1) solid
</style>
